<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Lazyload</title>
    <style>
        .image-item {
            display: block;
            margin-bottom: 50px;
            height: 500px;
            /* 一定记得设置图片高度 */
        }
    </style>
</head>

<body>
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img src="" class="image-item" lazyload="true"
        data-original="https://images.pexels.com/photos/6801452/pexels-photo-6801452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <script>
        var viewHeight = document.documentElement.clientHeight //获取可视区高度
        function lazyload() {
            var eles = document.querySelectorAll('img[data-original][lazyload]')
            Array.prototype.forEach.call(eles, function (item, index) {
                var rect
                if (item.dataset.original === "")
                    return
                rect = item.getBoundingClientRect() // 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
                if (rect.bottom >= 0 && rect.top < viewHeight) {
                    ! function () {
                        var img = new Image()
                        img.src = item.dataset.original
                        img.onload = function () {
                            item.src = img.src
                        }
                        item.removeAttribute("data-original") //移除属性，下次不再遍历
                        item.removeAttribute("lazyload")
                    }()
                }
            })
        }

        function throttle(fn) {
            let canRun = true;
            return function () {
                if (!canRun) {
                    return;
                }

                canRun = false;

                setTimeout(() => {
                    fn.apply(this, arguments);
                    canRun = true;
                }, 1000)
            }
        }

        lazyload() //刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
        document.addEventListener("scroll", throttle(lazyload)) // 这里配合节流进一步优化
    </script>
</body>

</html>